<template>
  <el-sub-menu :index="props.index">
    <template #title>地形加载</template>
    <el-menu-item index="2-1" @click="createTerrainProvider">{{
      hasTerrain ? '移除地形' : '添加地形'
    }}</el-menu-item>
    <el-menu-item index="2-2" @click="terrainExaggeration">{{
      isExaggeration ? '取消地形夸张' : '地形夸张效果'
    }}</el-menu-item>
    <el-menu-item index="2-3" @click="depthDetection">{{
      isDepthDetection ? '关闭深度检测' : '开启深度检测'
    }}</el-menu-item>
    <el-menu-item index="2-4" @click="switchUndergroundMode">{{
      isUndergroundMode ? '关闭地下模式' : '开启地下模式'
    }}</el-menu-item>
    <el-menu-item index="2-5" @click="resetTerrain">重置地形设置</el-menu-item>
  </el-sub-menu>
</template>

<script setup>
import * as Cesium from 'cesium'
import { useCesiumStore } from '@/stores/cesiumStore'
import { ref } from 'vue'

// 定义props
const props = defineProps({
  index: {
    type: String,
    required: true,
  },
})
// 使用 Cesium Store
const cesiumStore = useCesiumStore()

const hasTerrain = ref(false) //是否有地形
const isExaggeration = ref(false) //是否夸张效果
const isDepthDetection = ref(false) //是否深度监测
const isUndergroundMode = ref(false) //地下模式

//添加 / 移除地形
const createTerrainProvider = async () => {
  if (hasTerrain.value) {
    cesiumStore.viewerCesium.terrainProvider = new Cesium.EllipsoidTerrainProvider({})
    hasTerrain.value = false
    return
  }

  try {
    const terrainProvider = await Cesium.CesiumTerrainProvider.fromIonAssetId(1, {
      requestVertexNormals: false,
      //从服务器请求额外照明信息的标志，如果可用的话，以每个顶点法线的形式
      requestWaterMask: true,
      //此参数只针对ion服务器设置 true，false，对比不同效果。针对其他地形服务器，这些参数没用
      requestMetadata: true,
      //指示客户端是否应从服务器请求每个图块元数据（如果可用）的标志。
    })
    cesiumStore.viewerCesium.terrainProvider = terrainProvider
    hasTerrain.value = true
  } catch (error) {
    console.error('加载地形失败:', error)
  }
}

//地形夸张效果
const terrainExaggeration = () => {
  if (isExaggeration.value) {
    // 恢复正常地形比例
    cesiumStore.viewerCesium.scene.terrainExaggeration = 1.0
    isExaggeration.value = false
  } else {
    // 设置夸张效果
    cesiumStore.viewerCesium.scene.terrainExaggeration = 10.0
    isExaggeration.value = true
  }
}

//深度检测
const depthDetection = () => {
  isDepthDetection.value = !isDepthDetection.value
  cesiumStore.viewerCesium.scene.globe.depthTestAgainstTerrain = isDepthDetection.value
}

//开关地下模式
const switchUndergroundMode = () => {
  isUndergroundMode.value = !isUndergroundMode.value

  if (isUndergroundMode.value) {
    ////打开地下模式,关闭碰撞检测
    cesiumStore.viewerCesium.scene.screenSpaceCameraController.enableCollisionDetection = false
    //设置地球 透明
    cesiumStore.viewerCesium.scene.globe.translucency.enabled = true
  } else {
    //关闭地下模式,开启碰撞检测
    cesiumStore.viewerCesium.scene.screenSpaceCameraController.enableCollisionDetection = true
    //设置地球 不透明
    cesiumStore.viewerCesium.scene.globe.translucency.enabled = false
  }
}

// 重置所有地形设置
const resetTerrain = () => {
  // 移除地形
  cesiumStore.viewerCesium.terrainProvider = new Cesium.EllipsoidTerrainProvider({})

  // 重置夸张效果
  cesiumStore.viewerCesium.scene.terrainExaggeration = 1.0

  // 关闭深度检测
  cesiumStore.viewerCesium.scene.globe.depthTestAgainstTerrain = false

  // 关闭地下模式
  cesiumStore.viewerCesium.scene.screenSpaceCameraController.enableCollisionDetection = true
  //设置地球 不透明
  cesiumStore.viewerCesium.scene.globe.translucency.enabled = false

  // 重置所有状态
  hasTerrain.value = false
  isExaggeration.value = false
  isDepthDetection.value = false
  isUndergroundMode.value = false
}
</script>

<style lang="scss" scoped></style>
